<template>
  <el-form
    :ref="formName"
    :inline="inline"
    :model="formData"
    :rules="formRules"
    :label-width="labelWidth"
    @submit.native.prevent
  >
    <template v-for="(item, index) in formArr">
      <slot v-if="item.type == 'slot'" :name="item.prop" />
      <el-form-item
        v-if="item.isHide ? item.isHide() : true"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.type == 'input'"
          v-model.trim.lazy="formData[item.prop]"
          :placeholder="item.placeholder"
          :maxlength="item.maxlength"
          :disabled="item.disabled && item.disabled()"
          show-word-limit
          clearable
          @keyup.enter.native="item.handle()"
        >
          <i slot="suffix" class="fontNormal">{{ item.unit }}</i>
        </el-input>
        <!-- 输入框textarea -->
        <el-input
          v-if="item.type === 'textarea'"
          v-model.lazy="formData[item.prop]"
          :placeholder="item.placeholder"
          :maxlength="item.maxlength"
          type="textarea"
          :disabled="item.disabled && item.disabled()"
          show-word-limit
          clearable
        >
          <i slot="suffix" class="fontNormal">{{ item.unit }}</i>
        </el-input>
        <!-- 下拉框 -->
        <el-select
          v-if="item.type == 'select'"
          v-model="formData[item.prop]"
          :placeholder="item.placeholder || '请选择'"
          clearable
          filterable
          @change="item.change && item.change(formData[item.prop])"
        >
          <el-option
            v-for="op in typeof item.options == 'function'
              ? item.options()
              : item.options"
            :key="op.id"
            :label="op.name"
            :value="op.id"
          />
        </el-select>
        <!-- 角色下拉选择 -->
        <role-select
          v-if="item.type == 'roleSelect'"
          :form-data="formData"
          :prop="item.prop"
          :placeholder="item.placeholder || '请选择'"
          @event-change="item.change && item.change()"
        />
        <!-- 一二级分类下拉选择 -->
        <classify-select
          v-if="item.type == 'classifySelect'"
          :form-data="formData"
          :prop="item.prop"
          :placeholder="item.placeholder || '请选择'"
          :type-num="item.typeNum"
          :classify-type="item.classifyType"
          :classify-id="
            item.classifyId && typeof item.classifyId === 'function'
              ? item.classifyId()
              : item.classifyId
          "
          :type-id="
            item.typeId && typeof item.typeId === 'function'
              ? item.typeId()
              : item.typeId
          "
          @event-change="item.change && item.change()"
        />
        <!-- 供应商下拉选择 -->
        <supplier-select
          v-if="item.type == 'supplierSelect'"
          :form-data="formData"
          :prop="item.prop"
          :placeholder="item.placeholder || '请选择'"
          @event-change="item.change && item.change()"
        />
        <!-- 商户下拉选择 -->
        <merchant-select
          v-if="item.type == 'merchantSelect'"
          :form-data="formData"
          :prop="item.prop"
          :date="item.date && item.date()"
          :ids="item.ids && item.ids()"
          :placeholder="item.placeholder || '请选择'"
          @event-change="item.change && item.change()"
        />
        <!-- 项目下拉选择 -->
        <project-select
          v-if="item.type == 'projectSelect'"
          :form-data="formData"
          :prop="item.prop"
          :placeholder="item.placeholder || '请选择'"
          @event-change="item.change && item.change()"
        />
        <!-- 单位下拉选择 -->
        <unit-select
          v-if="item.type == 'unitSelect'"
          :form-data="formData"
          :prop="item.prop"
          :item-id="item.itemId && typeof item.itemId === 'function'
            ? item.itemId()
            : item.itemId
          "
          :placeholder="item.placeholder || '请选择'"
          @event-change="item.change && item.change()"
        />
        <!-- 商品下拉选择 -->
        <commodity-select
          v-if="item.type == 'commoditySelect'"
          :form-data="formData"
          :prop="item.prop"
          :placeholder="item.placeholder || '请选择'"
          :commodity-type="item.commodityType"
          :cate-id="
            item.cateId && typeof item.cateId === 'function'
              ? item.cateId()
              : item.cateId
          "
          :type-id="
            item.typeId && typeof item.typeId === 'function'
              ? item.typeId()
              : item.typeId
          "
          @event-change="item.change && item.change()"
        />
        <!-- 范围日期选择 -->
        <el-date-picker
          v-if="item.type == 'daterange'"
          v-model="formData[item.prop]"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :default-time="['00:00:00', '23:59:59']"
          @change="item.change && item.change(formData[item.prop])"
        />

        <!-- 范围日期选择 时分秒-->
        <el-date-picker
          v-if="item.type == 'datetimerange'"
          v-model="formData[item.prop]"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :default-time="['00:00:00', '23:59:59']"
          @change="item.change && item.change(formData[item.prop])"
        />

        <!-- 范围日期选择 -->
        <el-date-picker
          v-if="item.type == 'date'"
          v-model="formData[item.prop]"
          type="date"
          placeholder="选择日期"
          value-format="timestamp"
          @change="item.change && item.change(formData[item.prop])"
        />
        <!-- 多选 -->
        <el-checkbox-group
          v-if="item.type == 'checkbox'"
          v-model="formData[item.prop]"
        >
          <el-checkbox
            v-for="(o, i) in typeof item.checkboxs == 'function'
              ? item.checkboxs()
              : item.checkboxs"
            :key="i"
            :label="o.id"
          >{{ o.name }}</el-checkbox>
        </el-checkbox-group>
        <!-- 单选 -->
        <el-radio-group
          v-if="item.type == 'radio'"
          v-model="formData[item.prop]"
          @change="item.change && item.change()"
        >
          <el-radio
            v-for="(o, i) in typeof item.radios == 'function'
              ? item.radios()
              : item.radios"
            :key="i"
            :label="o.id"
          >{{ o.name }}</el-radio>
        </el-radio-group>
        <!-- 按钮 -->
        <template v-if="item.type == 'operation'">
          <el-button
            v-for="(o, i) in item.operation"
            :key="i"
            :type="o.type || 'primary'"
            :plain="o.plain || false"
            :icon="o.icon"
            @click="o.handle()"
          >
            {{ o.label }}
          </el-button>
        </template>
        <!-- 自定义 -->
        <slot v-if="item.type == 'itemSlot'" :name="item.prop" />
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
import roleSelect from './components/roleSelect'
import classifySelect from './components/classifySelect'
import supplierSelect from './components/supplierSelect'
import merchantSelect from './components/merchantSelect'
import projectSelect from './components/projectSelect'
import commoditySelect from './components/commoditySelect'
import unitSelect from './components/unitSelect'

export default {
  name: 'SearchForm',
  components: {
    roleSelect,
    classifySelect,
    supplierSelect,
    merchantSelect,
    projectSelect,
    unitSelect,
    commoditySelect
  },
  props: {
    formData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    formArr: {
      type: Array,
      default: function () {
        return []
      }
    },
    btnArr: {
      type: Array,
      default: function () {
        return []
      }
    },
    formRules: {
      type: Object,
      default: function () {
        return {}
      }
    },
    inline: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: ''
    },
    // 表单名字
    formName: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 表单验证
    validate () {
      return new Promise((resolve) => {
        this.$refs[this.formName].validate(resolve)
      })
    },
    // 表单重置
    resetForm () {
      return new Promise((resolve) => {
        this.$refs[this.formName].resetFields(resolve)
      })
    }
  }
}
</script>
